<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .a {
      width: 600px;
      border: 1px solid black;
      padding: 5px;
    }
    table {
      border-collapse: collapse;
    }
    thead {
      background-color: aqua;
    }
    td {
      border: 1px solid;
      width: 80px;
      height: 80px;
    }
    img {
      width: 50px;
      height: 50px;
    }
  </style>
  <body>
    <div id="root">
      <div class="a">
        <span>编号：</span>
        <input type="text" v-model="id" />
        <span>品牌名：</span>
        <input type="text" v-model="name" />
        <br />
        <span>图片地址:</span>
        <input type="text" v-model="imgSrc" />
        <span>年龄：</span>
        <input type="text" v-model="age" />
        <button @click="pushFn">添加</button>
      </div>
      <hr />
      <div class="a">
        <span>品牌名：</span>
        <input type="text" placeholder="请输入搜索" />
      </div>
      <hr />
      <table>
        <thead>
          <td>
            全选
            <input type="checkbox" @change="allCheckFn" :checked="allCheck" />
          </td>
          <td>图片</td>
          <td>编号</td>
          <td>名字</td>
          <td>年龄</td>
          <td>个数</td>
          <td>操作</td>
        </thead>
        <tbody>
          <tr v-for="(item,i) in person" :key="i">
            <td>
              <input type="checkbox" v-model="checks" :value="item" />
            </td>
            <td>
              <img :src="item.imgSrc" alt="" />
            </td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
              <button @click="item.number--">-</button>
              {{item.number}}
              <button @click="item.number++">+</button>
            </td>
            <td><button @click="delteFn(i)">删除</button></td>
          </tr>
        </tbody>
      </table>
      <div v-show="person.length === 0">没有数据了</div>
      <div style="width: 580px; text-align: right; border: 1px solid black">
        <h2>总年龄：{{total}}</h2>
      </div>
    </div>
  </body>
  <script src="http://unpkg.zhimg.com/vue@2"></script>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        allCheck: false,
        checks: [],
        imgSrc: "",
        id: "",
        age: "",
        name: "",
        person: [
          {
            imgSrc:
              "https://img0.baidu.com/it/u=3986649,4046591603&fm=253&fmt=auto&app=138&f=JPG?w=500&h=281",
            id: 1,
            name: "ruby",
            age: "15",
            number: "1"
          },
          {
            imgSrc:
              "https://img2.baidu.com/it/u=3951746340,995397642&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
            id: 2,
            name: "yang",
            age: "16",
            number: "1"
          },
          {
            imgSrc:
              "https://img2.baidu.com/it/u=3994458968,530697253&fm=253&fmt=auto&app=138&f=JPEG?w=576&h=498",
            id: 3,
            name: "blake",
            age: "16",
            number: "1"
          },
          {
            imgSrc:
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F21%2F20170121212200_RsPXT.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674647746&t=70b8673c7e4c7a264c64971ff0c78dea",
            id: 4,
            name: "wiess",
            age: "16",
            number: "1"
          }
        ]
      },
      computed: {
        total() {
          return this.checks
            .reduce(function (total, item) {
              return (total += item.age * item.number)
            }, 0)
            .toFixed(2)
        }
      },
      watch: {
        checks(newdata) {
          if (newdata.length === this.person.length) {
            this.allCheck = true
          } else {
            this.allCheck = false
          }
        }
      },
      methods: {
        pushFn() {
          let obj = {}
          obj.imgSrc = this.imgSrc
          obj.age = this.age
          obj.name = this.name
          obj.id = this.id
          obj.number = 1
          this.person.push(obj)
        },
        delteFn(i) {
          this.person.splice(i, 1)
        },
        allCheckFn(e) {
          let checked = e.target.checked
          if (checked) {
            this.checks = this.person
          } else {
            this.checks = []
          }
        }
      }
    })
  </script>
</html>
